<template>
  <div>
    <van-sticky class="fixed-top" @scroll="scroll">
      <van-nav-bar
        :class="{'van-toggle-nav':toggleNav}"
        :title="toggleNav?'':title"
        left-arrow
        :border="false"
        @click-left="onClickLeft"
      >
        <van-icon
          v-if="rightIcon"
          :name="rightIcon"
          slot="right"
          class="fs-42"
          @click="$emit('right-icon-click');"
        />
      </van-nav-bar>
    </van-sticky>
  </div>
</template>

<script>
export default {
  name: 'toggleNavBar',
  props: {
    title: {
      type: String
    },
    rightIcon: {
      type: String
    }
  },
  data() {
    return {
      toggleNav: true
    }
  },
  methods: {
    // 监听页面滚动
    scroll(obj) {
      //console.log(obj);
      this.showNavBar(obj.scrollTop)
    },
    //显现导航栏
    showNavBar(scrollTop) {
      //let scrollTop = document.documentElement.scrollTop; //滚动条的高
      if (scrollTop > 30) {
        this.toggleNav = false
      } else {
        this.toggleNav = true
      }
    }
  },
  created() {},
  mounted() {
    let self = this
    // 监听页面滚动，dosomething，显现导航栏
    //window.addEventListener("scroll", self.showNavBar, false);
  },
  destroyed() {
    //window.removeEventListener("scroll", self.showNavBar, false);
  }
}
</script>
